<script setup>
import { ElMessage ,ElMessageBox} from 'element-plus'
import { ref,onMounted} from 'vue';
import { getAllDeptApi,addDeptApi,getDeptApi,updateDeptApi,deleteDeptApi } from '@/api/dept.js';
/*------------- 查询部门------------------ */
/* 数据源 */
const deptList=ref([])
/* 查询 */
const search= async ()=>{
  const result=await getAllDeptApi()
  deptList.value=result.data
}
/* 绑定钩子函数,查询数据 */
onMounted(()=>{
  search();
})
/*------------- 查询部门------------------ */
/*------------- 新增部门------------------ */
/* 控制弹窗显示与隐藏 */
const dialogFormVisible=ref(false);
/* 和弹窗里面的输入数据双向绑定 */
const dept=ref({name:''})
/* 定义弹窗标题 */
const operationName=ref('')
/* 给新增部门按钮绑定事件 */
const add=()=>{
  dialogFormVisible.value=true
  operationName.value='新增部门'

}

/* 给弹窗确认按钮绑定事件 */
const deptForm=ref()/* 定义表单实例 */
const saveDept=async()=>{
   /* 提交校验 */
    if (!deptForm.value) return
     await deptForm.value.validate(async(valid, fields) => {
        if (valid) {
          /* 校验成功 */
          let result;
          if(dept.value.id){
            /* 修改部门 */
            result=await updateDeptApi(dept.value)
            if(result.code){
              ElMessage.success('修改成功')
              dept.value={name:''}
              dialogFormVisible.value=false
              search()
            }else{
              ElMessage.error(result.data.msg)
              dept.value={name:''}
            }
          }else{
            result=await addDeptApi(dept.value)
            if(result.code){
               ElMessage.success('添加成功')
               search();
               dept.value={name:''}
               dialogFormVisible.value=false
            }else{
               ElMessage.error('添加失败')
            }
          }           
     } else {
      /* 校验失败 */
      ElMessage.error('校验失败,请重新输入')
      deptForm.value.resetFields()
    }
  })
}

/* 表单校验 */
const rules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '部门名称长度为2-10位', trigger: 'blur' },
  ]
})
/* 给取消按钮绑定事件 */
const cancel=()=>{
  dialogFormVisible.value =false
  dept.value={name:''}
  deptForm.value.resetFields()
}
/* 查询回显 */
const getDeptById=async(id)=>{
  operationName.value='修改部门'
  dialogFormVisible.value=true
   const result=await getDeptApi(id)
  dept.value=result.data
}
/* 删除部门 */
const deleteDeptById=(id)=>{
  ElMessageBox.confirm(
    '确认删除','提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then( async() => {
      const result=await deleteDeptApi(id)
      if(result.code){
        ElMessage.success('删除成功')
        search();
      }else{
        ElMessage.error(result.msg)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>

<template>
  <h1>部门管理</h1>
  <div id="increase">
    <el-button type="primary" @click="add">+ 新增部门</el-button>
  </div>
  <!-- 部门表格 -->
  <el-table :data="deptList" border style="width: 100%" align="center">
    <el-table-column type="index" label="序号" width="120" align="center" />
    <el-table-column prop="name" label="部门名称" width="300" align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间"width="300"align="center" />
    <el-table-column prop="operation" label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" @click="getDeptById(scope.row.id)" size="small">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteDeptById(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogFormVisible" :title='operationName' width="500"  >
    <!-- 表单 -->
    <el-form :model="dept" :rules="rules" ref="deptForm">
      <el-form-item label="部门名称" label-width="90px"  prop="name">
        <el-input v-model="dept.name"  />
      </el-form-item>
    </el-form>
    <!-- 弹窗底部确认取消按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel" >取消</el-button>
        <el-button type="primary" @click="saveDept" >确定</el-button>
        
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
#increase{
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
